<!--
 * @Date: 2021-11-30 15:42:07
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2022-01-18 15:15:56
 * @FilePath: \web-ems\src\component\iconPicker\src\index.vue
-->
<template>
  <div class="go2-icon-picker">
    <a-dropdown :trigger="['click']">
      <a-input v-model:value="selected" readonly >
        <template #addonAfter>
          <go2-icon :type="selected"></go2-icon>
        </template>
      </a-input>
      <template #overlay>
        <a-menu class="go2-icon-picker-content">
          <a-menu-item :key="icon" v-for="icon in icons" @click="select(icon)">
            <go2-icon :type="icon"></go2-icon>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>
<script>
import icons from "./index.js";
import { watch, ref,computed,defineComponent } from "vue";

export default defineComponent({
  name: "go2-icon-picker", 
  props: {
    value: {
      type: String,
      require: false,
    }
  },
  setup(props, context) { 
    const selected = ref(props.value ? props.value : icons[0]); 
    const select = function (icon) {
      selected.value = icon;  
      context.emit("update:value", icon);
    };

    watch(props, (props) => {
      selected.value = props.value;
    });

    return {
      icons,
      select,
      selected,
    };
  },
});
</script>

<style>
.go2-icon-picker-content {
  height: 300px;
  overflow-y: scroll;
  width: 310px;
}

.go2-icon-picker-content .ant-dropdown-menu-item {
  display: inline-block;
}

.go2-icon-picker-content
  .ant-dropdown-menu-item
  .ant-dropdown-menu-title-content
  span {
  margin-right: 0px !important;
}
</style>